<template>
  <div id="comment" style="background: white">
    <div class="comtlt">
      <p class="comcon" @click="$router.go(-1)">取消</p>
      <p class="comrep" @click="publish()">发表</p>
    </div>
    <div class="comtnt">
      <van-field
        size="15px"
        placeholder="#说说自己的感受吧！"
        :border="false"
        @click="hideTabbar"
        v-model="message"
        rows="2"
        autosize
        maxlength="100"
        type="textarea"
        show-word-limit
      />
    </div>
    <div class="compic">
      <van-uploader
        :before-read="avatarBeforeRead"
        v-model="fileList"
        :after-read="avatarAfterRead"
        :max-count="2"
        multiple
      >
        <!-- <div>
          <img
            :src="avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
            v-if="avatar"
          />
        </div> -->
      </van-uploader>
    </div>
    <!-- <div style="width: 69%; margin: auto">
      <div>
        <p>施工：<van-rate v-model="value" @change="onChange" /></p>
      </div>
      <div>
        <p>服务：<van-rate v-model="valueone" @change="onChangeone" /></p>
      </div>
      <div>
        <p>设计：<van-rate v-model="valuetwo" @change="onChangetwo" /></p>
      </div>
    </div> -->
  </div>
</template>
<script>
import {
  Row,
  Col,
  Field,
  Uploader,
  Toast,
  Rate,
  Picker,
  Popup,
  Button,
} from 'vant';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import {
  abpubli,
  authInfo,
  authLogout,
  authProfile,
  storageUpload,
} from '@/api/api';
import myCropper from '@/views/common/my-cropper';
import lrz from 'lrz';
export default {
  name: 'comment',
  data() {
    return {
      message: '',
      // 前端展现用
      fileList: [],
      // 传后台数据用
      filestron: [],
      value: 3,
      valueone: 3,
      valuetwo: 3,
      username: getLocalStorage('nickName').nickName,
      usericon: getLocalStorage('avatar').avatar,
      cropper_imgUrl: '',
      cropper_originName: '',
      show_cropper: false,
      avatar: [],
    };
  },

  created() {
    // this.getUserInfo();
  },
  methods: {
    onChange(value) {},
    onChangeone(valueone) {},
    onChangetwo(valuetwo) {},

    hideTabbar() {
      this.$store.dispatch('hideTab');
    },
    publish() {
      if (this.message.length == 0) {
        Toast('请输入评论内容');
        return;
      }
      let ary = [];
      let cye = [];

      this.filestron.forEach((item) => {
        ary.push(item);
      }),
        abpubli({
          userIcon: this.usericon,
          content: this.message,
          pictures: ary,
          shopId: this.$route.params.id,
          username: this.username,
        })
          .then((res) => {
            Toast('评论成功！');
            this.$router.go(-1);
          })
          .catch((res) => {
            Toast('评论失败！');
          });
    },
    avatarBeforeRead(file) {
      // console.log('sh', file);
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('只允许上传jpg/png格式的图片！');
        return false;
      }
      if (file.size >= 5242880) {
        Toast('只允许上传小于5MB的图片！');
        return false;
      }
      return true;
    },
    avatarAfterRead(file) {
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        //new FormData()用于创建键值对的数据便于传输ajax
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.filestron.push(res.data.data.url);
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行

            storageUpload(rst.formData)
              .then((res) => {
                that.filestron.push(res.data.data.url);
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Rate.name]: Rate,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [myCropper.name]: myCropper,
  },
};
</script>
<style lang="scss" scoped>
.comtlt {
  width: 83%;
  margin: auto;
  display: flex;
  height: 2rem;
  justify-content: space-between;
  .comcon {
    margin-top: 1rem;
  }

  .comrep {
    margin-top: 0.7rem;
    line-height: 1.5rem;
    height: 1.5rem;
    text-align: center;
    width: 3rem;
    border-radius: 3px;
    background: #1d5ae8;
    color: white;
  }
}
.comtnt {
  padding-top: 1rem;
  width: 90%;
  margin: auto;
  .comtntxt {
    padding: 1rem;
    border: none;

    width: 100%;
    overflow-y: visible;
  }
}
.compic {
  width: 90%;
  margin: auto;
  height: auto;
}
</style>